<!-- App.vue -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">
        <div class="header">
          <router-link to="/" class="logo-to-home">
            <div class="header-lift">
              <img src="./assets/logo.png">
              <span>启宇国学弟子门人修身学习积分系统</span>
            </div>
            <div class="header-right">

            </div>
          </router-link>
        </div>
      </el-header>
      <el-main class="common-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
// import { ExcelExportUtil } from '@/utils/ExcelExportUtil';
import { DiscipleService } from '@/service/DiscipleService';
import { RecycleBinService } from '@/service/RecycleBinService';
import { ScoringPeriodService } from '@/service/ScoringPeriodService';
import { RuleService } from './service/RuleService';
import { ref, onBeforeMount, onMounted, onUnmounted } from 'vue';

onMounted(() => {
  // 初始化service
  DiscipleService.initialize();
  RecycleBinService.initialize();
  RuleService.initialize();
});

</script>

<style scoped>
.common-layout {
  height: 100vh;
  width: 100%;
}

.el-header {
  height: 60px;
  background-color: #ffffff;
  padding: 0 0;
}

.header {
  display: flex;
  margin: 0;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  /* 底部阴影效果 */
  box-shadow: 0 2px 8px #a5a5a5;
}

.header-lift {
  display: flex;
  align-items: center;
}

.header-lift img {
  height: 40px;
  margin-right: 10px;
}

.header-right {
  margin-left: auto;
}

/* 按钮基础样式 */
.header-right .input-btn,
.header-right .output-btn,
.header-right .clear-btn {
  margin-left: 10px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 导入按钮样式 */
.header-right .input-btn {
  background-color: #409eff;
  color: #fff;
}

/* 导出按钮样式 */
.header-right .output-btn {
  border: 1px solid #409eff;
  background-color: #fff;
  color: #409eff;
}

/* 清空按钮样式 */
.header-right .clear-btn {
  border: 1px solid #ff002b;
  background-color: #fff;
  color: #ff002b;
}

/* 跳转页面样式 */
.header-right .return-page-btn {
  margin-left: 10px;
  padding: 6px 12px;
  border: 1px solid #fff;
  background-color: #67c23a;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 按钮悬停效果 */
.header-right .input-btn:hover {
  background-color: #72b5fd;
}

.header-right .output-btn:hover {
  background-color: #ecf5ff;
}

.header-right .clear-btn:hover {
  background-color: #ffecec;
}

.header-right .return-page-btn:hover {
  background-color: #89f553;
}

.logo-to-home {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}

.common-header {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.common-main {
  margin-top: 60px;
}
</style>